<?php
session_start();

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>汽车之家论坛</title>
    <link href="css/slide.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="singup/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/easydialog.css">
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style>
        #loading{width: 100%;text-align: center;display: none}
        #loading img{max-width: 100px;width: 100%}
    </style>
</head>
<body>
<div class="top">
    <div class="top_main">
        <div class="logo" onclick="javascript:location.href='index.php';">我的汽车之家</div>
        <div id="login">登录</div>
        <div class="search">
            <input id="search"><input type="button" onclick="search()" value="论坛搜索" class="btnSearch">
        </div>
        <div class="clear"></div>
    </div>
    <div id="banner">
        <div class="slide_container">
            <ul class="rslides rslides1" id="slider">
                <li id="rslides1_s0" class="rslides1_on"
                    style="display: block; float: left; position: relative; opacity: 1; z-index: 2; transition: opacity 1000ms ease-in-out 0s;">
                    <img src="img/banner1.jpg" alt="">
                </li>
                <li id="rslides1_s1" class=""
                    style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 1000ms ease-in-out 0s;">
                    <img src="img/banner2.jpg" alt="">
                </li>
                <li id="rslides1_s2" class=""
                    style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 1000ms ease-in-out 0s;">
                    <img src="img/banner3.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <div class="info">
        <div class="tx"><img src="" id="pic"></div>
        <div class="personalInfo">
            用户名：<span id="username1"></span><br>昵称：<span id="nickname1"></span><br>注册时间：<span id="singUpDate"></span>
        </div>
        <div class="countInfo">
            发贴数：<span id="total"></span><br>最后发贴时间：<span id="lastPostTime"></span>
        </div>
        <div class="lastInfo">
            最后发贴标题：<span id="lastTitle"></span><br>最后回复时间：<span id="lastReplyTime"></span>
        </div>
    </div>
    <div class="mainContent">
        <ul id="realContent">
            <li>
                <ul class="topic1">
                    <li style="float: left;width: 30px;"><img src="img/topnull.png"></li>
                    <li style="width:50%"><b>帖子标题</b></li>
                    <li style="width:15%"><b>作者/发布时间</b></li>
                    <li style="width:15%"><b>回复/点击</b></li>
                    <li style="width:15%"><b>最后回复</b></li>

                </ul>
                <div class="clear"></div>
            </li>
        </ul>
        <div id="loading"><img src="img/loading.gif"></div>
        <div class="count">本坛帖子总数：<span id="total1">65</span>
            <span id="showNewPost">
                    </span></div>
        <div style="margin: 10px auto;font-size: 20px;text-align: center;font-weight: bold;border: 1px solid gray;padding: 10px;">
            <div style="margin: 10px;">请输入标题：<input id="title" width="100%" style="font-size: 16px;padding: 5px;width: 300px;">
            </div>
        <script id="editor" type="text/plain" style="width:100%;height:200px;" ></script>
        </div>
        <div style="width: 80%;margin: 10px auto">
            <div class="count">
                <span class="newPost" onclick="getAllHtml()">发表新贴子</span>
            </div>
        </div>
        <!--<div class="newPost" onclick="getMore();">查看更多</div>-->
    </div>
    <div class="clear"></div>

    <!--<div style="margin: 0 auto;width: 50%;text-align: center">
        <input type="button" onclick="getMore()" value="点击加载更多">
    </div>-->
    <!--    <div class="more" id="more" style=" cursor: pointer; font-size: 16px; line-height: 25px; color: #ffffff; padding: 5px; background-color: #aa5500;  display: block; width: 130px;margin: 15px auto; text-align: center; ">点击加载更多</div>
    -->
    <div class="bot">版权所有 汽车之家</div>
    <div id="registerForm" class="form_wrapper" style="width: 550px;">
        <form class="register">
            <h3>用户注册</h3>
            <div class="column">
                <div>
                    <label>用户名:</label>
                    <input type="text" name="username" id="username">
                    <span class="error">This is an error</span>
                </div>
                <div>
                    <label>昵称:</label>
                    <input type="text" name="nickname" id="nickname">
                    <span class="error">This is an error</span>
                </div>
                <div>
                    <label>出生日期:</label>
                    <div class="birthday"><input type="text" id="birthday" class="datebox-f combo-f textbox-f"
                                                 textboxname="birthday" style="display: none;"
                                                 comboname="birthday"></div>
                </div>
            </div>
            <div class="column">
                <div>
                    <label>选择头像:</label>
                    <input type="file" name="pic" id="pic">
                    <span class="error">This is an error</span>
                </div>
                <div>
                    <label>电子信箱:</label>
                    <input type="text" name="email" id="email">
                    <span class="error">This is an error</span>
                </div>
                <div>
                    <label>密码:</label>
                    <input type="password" name="pw" id="pw">
                    <span class="error">This is an error</span>
                </div>
            </div>
            <div class="bottom">
                <div class="remember"></div>
                <input type="button" value="注册" onclick="singup();">
                <a href="javascript:void(0);" rel="login" class="linkform" id="showLogin">已经有帐号了? 点击登录</a>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="loginFrom" class="form_wrapper">
        <form class="login">
            <h3>用户登录</h3>
            <div>
                <label>用户名:</label>
                <input type="text" id="username2">
                <span class="error">This is an error</span>
            </div>
            <div>
                <label>密码: <a href="singup/forgot_password.html" rel="forgot_password"
                              class="forgot linkform">忘记密码?</a></label>
                <input type="password" id="pw2">
                <span class="error">This is an error</span>
            </div>
            <div class="bottom">
                <div class="remember"><input type="checkbox" id="rememberMe" value="1"><span>保存登录状态</span></div>
                <input type="button" value="登录" onclick="login();">
                <a href="javascript:void(0);" rel="register" class="linkform" id="showRegister">还没有帐号? 点击注册</a>
                <div class="clear"></div>
            </div>
        </form>
    </div>
    <div class="clear"></div>
    <script src="js/jq.js"></script>
    <script src="js/jquery-form.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script src="js/easydialog.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js"></script>
    <script src="js/site.js"></script>
    <script type="text/javascript" charset="utf-8" src="u/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="u/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="u/lang/zh-cn/zh-cn.js"></script>
    <script>
        var isSearch = 0,keyWords = '', isAppend = 0;//默认表示直接进入首页，不是搜索结果
        var over = 0;//默认表示还未结束，还有数据
        var isLogin = 1; //登录链接的作用是登录还是注销
        var perPage = 5;//第一页取3条数据
        var page = 1; //当前是第1页
        var ue = UE.getEditor('editor');
        function getMore(){
            if(over == 1){
                return;
            }
            page++;
            getData();
        }
        function search(){
            keyWords = $("#search").val().trim();
            if(keyWords.length == 0){
                alert('搜索关键词还没呢');
                return;
            }
            isSearch = 1;
            isAppend = 0;
            page = 1;
            over = 0;
            getData();
        }
        function getAllHtml() {
            if(hasContent() && $("#title").val().trim().length > 0){
                $.ajax({
                    url:'api.php',
                    data:{action:'postContent',title:$("#title").val().trim(),contents:UE.getEditor('editor').getContent()},
                    type:'post',
                    dataType:'json',
                    success:function (d){
                        if(d.code == 200){
                            alert('发表成功');
                            location.reload();
                        }
                        else{
                            alert(d.msg);
                        }
                        $("#title").val('');
                        UE.getEditor('editor').setContent("");
                    }
                })
            }
            else{
                alert('你还没有填写任何内容哦');
            }
        }
        function hasContent() {
            return UE.getEditor('editor').hasContents();
        }
        function loginOK(ok){
            if(ok == 1){
                //已经登录了，在登录区显示注销链接
                $("#login").html("注销");
                isLogin = 0;//切换到注销
            }
            else{
                $("#login").html("登录");
                isLogin = 1;//切换到登录
            }
        }
        function login(){
            var username = $("#username2").val().trim();
            var password = $("#pw2").val().trim();
            var rememberMe = 0;
            $('input[id="rememberMe"]:checked').each(function(){
                rememberMe = 1;
            });
            if(username == '' || password == ''){
                alert('用户名和密码是必填项');
            }
            else{
                $.ajax({
                    url:'postLogin.php',
                    dataType:'json',
                    type:'post',
                    beforeSend: function (s) {
                        s.setRequestHeader("token",getCookie('token')); //发送自定义header信息，中文需要使用encodeURIComponent编码
                        s.setRequestHeader("username",getCookie('username'));
                    },
                    data:{username:username,password:password,rememberMe:rememberMe},
                    success:function (d){
                        if(d.code == '-1'){
                            alert(d.msg)
                            loginOK(0);
                        }
                        else{
                            alert('登录成功');
                            $("#username1").text(d.data.username);
                            $("#nickname1").text(d.data.nickname);
                            $("#singUpDate").text(d.data.postdate);
                            $("#pic").attr('src','img/' + d.data.pic);
                            $(".info").show();
                            loginOK(1);
                        }
                        easyDialog.close();
                    },
                    error:function (d1,d2,d3){
                        console.log(d1)
                        console.log(d2)
                        console.log(d3)
                    }
                })
            }
        }
        function setCookie(name,value,time)
        {
            //这是有设定过期时间的使用示例：
            //s是指秒数，20秒则：s20
            //h是指小时，12小时则：h12
            //d是天数，30天则：d30
            //setCookie("name","hayden","s20");
            var strsec = getsec(time);
            var exp = new Date();
            exp.setTime(exp.getTime() + strsec*1);
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
        }
        function getsec(str)
        {
            var str1=str.substring(1,str.length)*1;
            var str2=str.substring(0,1);
            if (str2=="s")
            {
                return str1*1000;
            }
            else if (str2=="h")
            {
                return str1*60*60*1000;
            }
            else if (str2=="d")
            {
                return str1*24*60*60*1000;
            }
        }
        function getCookie(name)
        {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }
        function delCookie(name)
        {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(name);
            if(cval!=null)
                document.cookie= name + "="+cval+";expires="+exp.toGMTString();
        }
        function singup(){
            //首先判断各选项是否有输入，并进行必要的数据验证
            var username = $("#username").val().trim();
            var nickname = $("#nickname").val().trim();
            var birthday = $("#birthday").datebox('getValue');
            var pic = $("#pic").val();
            var email = $("#email").val().trim();
            var pw = $("#pw").val().trim();
            if(username == '' || nickname == '' || pic == '' || pw == ''){
                alert('用户名、昵称、头像、密码均为必填项');
                return;
            }
            //其次，上传头像
            $("#uploadPic").ajaxSubmit({
                dataType:'json',
                success:function (d){
                    if(d.code == '-1'){
                        alert(d.msg);
                    }
                    else{
                        //说明头像上传成功，接下来写入数据库
                        //将所有参数构建成一个json对象
                        var data = {username:username,nickname:nickname,birthday:birthday,email:email,pw:pw,pic:d.fileName};
                       postSingUp(data);
                    }
                }
            })
        }
        function postSingUp(data){
            $.ajax({
                url:'postRegister.php',
                data:data,
                type:'post',
                dataType:'json',
                success:function (d){
                    console.log(d);
                    if(d.code == 200){
                        alert('用户注册成功');
                    }
                    else{
                        alert(d.msg);
                    }
                    $("#username").val('');
                    $("#nickname").val('');
                    $("#birthday").datebox('setValue','');
                    $("#pic").val('');
                    $("#email").val('');
                    $("#pw").val('');
                    easyDialog.close();
                },
                error:function (){
                    alert('网络错误');
                    $("#username").val('');
                    $("#nickname").val('');
                    $("#birthday").datebox('setValue','');
                    $("#pic").val('');
                    $("#email").val('');
                    $("#pw").val('');
                    easyDialog.close();
                }
            })
        }
        function getData(){
            $.ajax({
                url:"api.php",
                data:{page:page,perPage:perPage,action:'getData',isSearch:isSearch,keyWords:keyWords},
                type:'post',
                dataType:'json',
                beforeSend:function (){
                  $("#loading").show();
                },
                complete:function (){
                    $("#loading").hide();
                },
                success:function (d){
                    //console.log(d);
                    if(d.code == -1){
                        alert(d.msg);
                    }else {
                        if(d.data.length == 0){
                            //说明数据已经取完了
                            over = 1;
                            alert('已经没有新的数据了');
                            return;
                        }
                        else{
                            over = 0;
                        }
                        //拼接字符串，在页面 显示出来
                        var str = '';
                        for (var i = 0; i < d.data.length; i++) {
                            str += '<li style="float:left;width:30px;height: 30px;color:gray;cursor:pointer" class="SETTOP"><span data-last="' + d.data[i]['istop'] + '" data-id="' + d.data[i]['id'] + '">';
                            if (d.data[i]['istop'] == 1) {
                                str += '<img src="img/top.png">';
                            }
                            str += '</span></li>';
                            //console.log(d.data[i]['id']);
                            str += '<li class="li_bot"><ul class="topic2"><li style="width:50%" class="topicTitle"><a href="subtopic.php?id=' + d.data[i]['id'] + '">' + d.data[i]['title'] + '</a></li>';
                            str += '<li style="width:15%">' + d.data[i]['MainNickName'] + '<br><span class="posttime">' + d.data[i]['posttime'] + '</span></li>';
                            str += '<li style="width:15%"><span class="replyNum">' + d.data[i]['replyNum'] + '</span><br><span class="posttime">' + d.data[i]['hits'] + '</span></li>';
                            str += '<li style="width:15%">' + d.data[i]['SubNickName'] + '<br><span class="posttime">';
                            if (d.data[i]['SubNickName'] != '暂无回复') {
                                str += d.data[i]['lastreplyposttime'];
                            }
                            str += '</span></li></ul><div class="clear"></div></li><div class="clear"></div>';
                        }
                        if(isSearch == 1){
                            //说明是搜索结果，则需要将原有内容清空，然后添加新的搜索结果
                            var tmpStr = '<li> <ul class="topic1"> <li style="float: left;width: 30px;"><img src="img/topnull.png"></li> <li style="width:50%"><b>帖子标题</b></li> <li style="width:15%"><b>作者/发布时间</b></li> <li style="width:15%"><b>回复/点击</b></li> <li style="width:15%"><b>最后回复</b></li> </ul> <div class="clear"></div>  </li>';
                            tmpStr += str
                            if(isAppend == 0){
                                //说明是搜索结果的第一页，需要将原有内容清空
                                $("#realContent").html(tmpStr);
                                isAppend = 1;
                            }
                            else{
                                $("#realContent").append(str);
                            }
                        }
                        else{
                            //说明是直接显示结果，需要保留旧的内容
                            $("#realContent").append(str);
                        }

                    }
                },
                error:function (){
                    alert('网络错误');
                }
            })
        }
        $(function () {
            var picForm = '<form id="uploadPic" action="postAjaxUploadPic.php" method="post" ecntype="mulitpart/form-data"></form>';
            $("#pic").wrap(picForm);
            $("#birthday").datebox({
                required: true,
                panelWidth: 200,
                panelHeight: 150
            })
            $("#slider").responsiveSlides({
                speed: 1000
            });
            $("#login").click(function () {
                console.log(isLogin);
                if(isLogin == 1){
                    //说明现在是登录
                    easyDialog.open({
                        container: 'loginFrom',
                        fixed: false
                    })
                }
                else{
                    //说明现在是注销
                    location.href='logout.php';
                }
            })
            $("#showRegister").click(function () {
                easyDialog.close();
                easyDialog.open({
                    container: 'registerForm',
                    fixed: false
                })
            })
            $("#showLogin").click(function () {
                easyDialog.close();
                easyDialog.open({
                    container: 'loginFrom',
                    fixed: false
                })
            })
            //判断一下当前是否处于登录状态。如果登录了，则显示info
            $.ajax({
                url:'checkLogin.php',
                type:'post',
                dataType:'json',
                data:{remember:0},
                success:function (d){
                    if(d.code == 0){
                        //说明没有处于登录状态,则检查一下是否保存了登录
                        $.ajax({
                            url:'checkLogin.php',
                            type:'post',
                            dataType:'json',
                            data:{remember:1},//表明是检查是否保存 登录
                            success:function (d){
                                if(d.code == 0){
                                    //说明没有处于登录状态,则检查一下是否保存了登录
                                }
                                else{
                                    if(d.code == -1){
                                        alert('自动登录失败');
                                        loginOK(0);
                                    }
                                    else{
                                        $("#username1").text(d.data.username);
                                        $("#nickname1").text(d.data.nickname);
                                        $("#singUpDate").text(d.data.postdate);
                                        $("#pic").attr('src','img/' + d.data.pic);
                                        $(".info").show();
                                        loginOK(1);
                                    }
                                }
                            }
                        })
                    }
                    else{
                        if(d.code == -1){
                            alert('自动登录失败');
                            loginOK(0);
                        }
                        else{
                            $("#username1").text(d.data.username);
                            $("#nickname1").text(d.data.nickname);
                            $("#singUpDate").text(d.data.postdate);
                            $("#pic").attr('src','img/' + d.data.pic);
                            $(".info").show();
                            loginOK(1);
                        }
                    }
                }
            })
            getData();
            $(window).scroll(function (){
                /*console.log("$(window).height():"+$(window).height());
                console.log("$(document).height():"+$(document).height());
                console.log("$(document).scrollTop():"+$(document).scrollTop());*/
                if($(document).scrollTop() + $(window).height() >= $(document).height() - 20){
                    //还差20就到底了
                    getMore();
                }
            })
        })
    </script>

</div>
<div class="panel combo-p" style="position: absolute; z-index: 10; display: none;">
    <div class="combo-panel panel-body panel-body-noheader" title="" id="" style="overflow: hidden;">
        <div class="datebox-calendar-inner">
            <div class="calendar" style="width: 176px; height: 176px;">
                <div class="calendar-header">
                    <div class="calendar-nav calendar-prevmonth"></div>
                    <div class="calendar-nav calendar-nextmonth"></div>
                    <div class="calendar-nav calendar-prevyear"></div>
                    <div class="calendar-nav calendar-nextyear"></div>
                    <div class="calendar-title"><span class="calendar-text">四月 2020</span></div>
                </div>
                <div class="calendar-body" style="height: 154px;">
                    <table class="calendar-dtable" cellspacing="0" cellpadding="0" border="0">
                        <thead>
                        <tr>
                            <th>日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="calendar-first">
                            <td class="calendar-day calendar-other-month calendar-sunday calendar-first "
                                abbr="2020,3,29" style="">29
                            </td>
                            <td class="calendar-day calendar-other-month " abbr="2020,3,30" style="">30</td>
                            <td class="calendar-day calendar-other-month " abbr="2020,3,31" style="">31</td>
                            <td class="calendar-day " abbr="2020,4,1" style="">1</td>
                            <td class="calendar-day " abbr="2020,4,2" style="">2</td>
                            <td class="calendar-day " abbr="2020,4,3" style="">3</td>
                            <td class="calendar-day calendar-saturday calendar-last " abbr="2020,4,4" style="">4</td>
                        </tr>
                        <tr class="">
                            <td class="calendar-day calendar-sunday calendar-first " abbr="2020,4,5" style="">5</td>
                            <td class="calendar-day " abbr="2020,4,6" style="">6</td>
                            <td class="calendar-day " abbr="2020,4,7" style="">7</td>
                            <td class="calendar-day " abbr="2020,4,8" style="">8</td>
                            <td class="calendar-day " abbr="2020,4,9" style="">9</td>
                            <td class="calendar-day " abbr="2020,4,10" style="">10</td>
                            <td class="calendar-day calendar-saturday calendar-last " abbr="2020,4,11" style="">11</td>
                        </tr>
                        <tr class="">
                            <td class="calendar-day calendar-sunday calendar-first " abbr="2020,4,12" style="">12</td>
                            <td class="calendar-day " abbr="2020,4,13" style="">13</td>
                            <td class="calendar-day " abbr="2020,4,14" style="">14</td>
                            <td class="calendar-day " abbr="2020,4,15" style="">15</td>
                            <td class="calendar-day " abbr="2020,4,16" style="">16</td>
                            <td class="calendar-day " abbr="2020,4,17" style="">17</td>
                            <td class="calendar-day calendar-saturday calendar-last " abbr="2020,4,18" style="">18</td>
                        </tr>
                        <tr class="">
                            <td class="calendar-day calendar-sunday calendar-first " abbr="2020,4,19" style="">19</td>
                            <td class="calendar-day " abbr="2020,4,20" style="">20</td>
                            <td class="calendar-day " abbr="2020,4,21" style="">21</td>
                            <td class="calendar-day " abbr="2020,4,22" style="">22</td>
                            <td class="calendar-day " abbr="2020,4,23" style="">23</td>
                            <td class="calendar-day calendar-today calendar-selected " abbr="2020,4,24" style="">24</td>
                            <td class="calendar-day calendar-saturday calendar-last " abbr="2020,4,25" style="">25</td>
                        </tr>
                        <tr class="">
                            <td class="calendar-day calendar-sunday calendar-first " abbr="2020,4,26" style="">26</td>
                            <td class="calendar-day " abbr="2020,4,27" style="">27</td>
                            <td class="calendar-day " abbr="2020,4,28" style="">28</td>
                            <td class="calendar-day " abbr="2020,4,29" style="">29</td>
                            <td class="calendar-day " abbr="2020,4,30" style="">30</td>
                            <td class="calendar-day calendar-other-month " abbr="2020,5,1" style="">1</td>
                            <td class="calendar-day calendar-other-month calendar-saturday calendar-last "
                                abbr="2020,5,2" style="">2
                            </td>
                        </tr>
                        <tr class="calendar-last">
                            <td class="calendar-day calendar-other-month calendar-sunday calendar-first "
                                abbr="2020,5,3" style="">3
                            </td>
                            <td class="calendar-day calendar-other-month " abbr="2020,5,4" style="">4</td>
                            <td class="calendar-day calendar-other-month " abbr="2020,5,5" style="">5</td>
                            <td class="calendar-day calendar-other-month " abbr="2020,5,6" style="">6</td>
                            <td class="calendar-day calendar-other-month " abbr="2020,5,7" style="">7</td>
                            <td class="calendar-day calendar-other-month " abbr="2020,5,8" style="">8</td>
                            <td class="calendar-day calendar-other-month calendar-saturday calendar-last "
                                abbr="2020,5,9" style="">9
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="calendar-menu" style="display: none;">
                        <div class="calendar-menu-year-inner"><span
                                class="calendar-nav calendar-menu-prev"></span><span><input class="calendar-menu-year"
                                                                                            type="text"></span><span
                                class="calendar-nav calendar-menu-next"></span></div>
                        <div class="calendar-menu-month-inner"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>